<template>
  <div class="selected-rights">
    <div class="container">
      <div class="left-section">
        <h2 class="main-title">大会员精选权益</h2>
        <span class="sub-title">年度大会员专享，每月可领取</span>
        <img src="@/assets/imgs/big_vip/cartoon_img.png" alt="" class="left-image">
      </div>
      <div class="right-section">
        <div class="rights-list">
          <div class="right-item" v-for="(item, index) in rightsList" :key="index">
            <img :src="item.url" :alt="item.text" class="item-icon">
            <span class="item-text">{{ item.text }}</span>
            <button class="item-btn">{{ item.btn }}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import img1 from '@/assets/imgs/big_vip/img1.png';

const rightsList = [
  {
    url: img1,
    text: '大会员专属头像框',
    btn: '领取'
  },
  {
    url: img1,
    text: '大会员专属动态贴纸',
    btn: '领取'
  },
  {
    url: img1,
    text: '大会员专属动态表情',
    btn: '领取'
  },
  {
    url: img1,
    text: '大会员专属动态挂件',
    btn: '领取'
  }
];
</script>

<style scoped lang="scss">
.selected-rights {
  background: rgba(141, 3, 206, 0.2);

  .container {
    display: flex; /* 启用flex布局 */
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px; /* 左右栏间距 */
    align-items: center; /* 垂直居中 */
  }

  .left-section {
    flex: 1;
    padding: 0 20px;

    .main-title {
      font-size: 28px;
      color: #222;
    }

    .sub-title {
      font-size: 16px;
      color: #666;
    }

    .left-image {
      width: 168px;
      height: 140px;
    }
  }

  .right-section {
    flex: 2;
    padding: 0 20px;

    .rights-list {
      display: flex;
      justify-content: space-between;
      gap: 15px;

      .right-item {
        flex: 1;
        min-width: 0;
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }

        .item-icon {
          width: 60px;
          height: 60px;
          object-fit: contain;
          margin-bottom: 15px;
        }

        .item-text {
          font-size: 16px;
          color: #333;
          margin-bottom: 15px;
          font-weight: 500;
        }

        .item-btn {
          background: linear-gradient(135deg, #FF4E4E, #FF8E8E);
          color: white;
          border: none;
          padding: 8px 16px;
          border-radius: 20px;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.3s;
          width: 100%;
          max-width: 100px;

          &:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 8px rgba(255, 78, 78, 0.3);
          }
        }
      }
    }
  }
}


</style>
